<template>
  <p>测试ele</p>
  <p>{{obj}}</p>
  <el-table
    :data="tableData"
    border
    stripe
    :header-row-style='FnColor'
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      fixed="left"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      fixed="right"
      label="地址">
    </el-table-column>
  </el-table>


  <p>测试分割线1234</p>
  <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  
</template>

<script>
import {ref, reactive} from 'vue'
export default {
  setup(props) {
    let obj1 = {name: '张三', age: 14}
    const obj = reactive(obj1)
    let tableData = reactive(
      [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
    )

    let options = reactive(
        [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }]
    )

    let value = ref(null)

    let FnColor = ({row, column, rowIndex, columnIndex}) => {
      console.log(row, column, rowIndex, columnIndex)
      if(rowIndex === 0) {
        return 'background-color: red; font-size: 16px'
      }
    }
    return {
      obj,
      tableData,
      options,
      value,
      FnColor
    }
  }
}
</script>

<style lang='scss' scoped>

</style>